<template>
    <div>
        <!-- header -->
        <div class="header_box">
            <div>
                <van-icon class="icon" name="arrow-left" @click="back" />
            </div>
            <div name="center">商品详情</div>
            <div name="right" @click="showPopup">分类</div>
        </div>
        <!-- list -->
        <div class="left">
            <van-row>
                <div>
                    <!-- vant侧边导航 -->
                    <van-tree-select
                        height="55vw"
                        :items="mainTypes"
                        :main-active-index.sync="active"
                        :style="{ minHeight: NewHeigh }"
                    >
                        <template #content>
                            <!-- right -->
                            <div>
                                <van-search
                                    v-model="value"
                                    show-action
                                    placeholder="请输入搜索关键词"
                                    @search="onSearch"
                                >
                                    <template #action>
                                        <div @click="onList">按销量排序</div>
                                    </template>
                                </van-search>

                                <div>
                                    <div
                                        v-for="(item, index) in dataList"
                                        :key="index"
                                        class="d-flex a-center line-h p-1"
                                        style="gap: 5px"
                                    >
                                        <van-image
                                            height="40px"
                                            fit="cover"
                                            src="https://img01.yzcdn.cn/vant/ipad.jpeg"
                                        />
                                        <div class="font-mi flex-1 py-1">
                                            <div class="font-sm">{{ item.chineseName }}</div>
                                            <div class="py text-light-muted">月售：{{ item.goodsPrice }}</div>
                                            <div class="py text-light-muted">库存：{{ item.goodsPackingFee }}</div>
                                            <div class="py text-danger">价格：{{ item.goodsInventory }}</div>
                                        </div>
                                        <div class="font-sm flex-1 d-flex flex-column py-1 a-end">
                                            <p @click="zhiding(index)">置顶</p>
                                            <van-icon name="bar-chart-o" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </template>
                    </van-tree-select>
                </div>
            </van-row>
        </div>
    </div>
</template>

<script>
import { CommApi } from '../../https/Commit.js'
import { outSuccess } from '../../https/Commit.js'
export default {
    name: 'manageView',
    data() {
        return {
            height: '',
            NewHeigh: '',
            title: ['商品排序', '保存'],
            value: '',
            activeId: 1,
            activeIndex: 0,
            classifyKey: 0,
            // 侧边内容
            active: 0,
            mainTypes: [
                {
                    text: '石磨肠粉'
                },
                {
                    text: '面食小吃'
                },
                {
                    text: '粥食小吃'
                }
            ],
            dataList: []
        }
    },
    created() {
        this.height = window.innerHeight - 50
        this.NewHeigh = this.height + 'px'
        console.log(this.NewHeigh)
        CommApi(1)
            .then((res) => {
                console.log(res)
                this.dataList = res.data
            })
            .catch((err) => {
                console.log(err)
            })
    },
    methods: {
        onSearch() {
            console.log(this.value)
            outSuccess(this.value)
                .then((res) => {
                    console.log(res)
                })
                .catch((err) => {
                    console.log(err)
                })
        },
        showPopup() {
            this.$router.push('/CommodityMan')
        },
        onList() {
            console.log('111')
            outSuccess()
                .then((res) => {
                    console.log(res)
                })
                .catch((err) => {
                    console.log(err)
                })
        },
        zhiding(id) {
            console.log(id)
            outSuccess()
                .then((res) => {
                    console.log(res)
                })
                .catch((err) => {
                    console.log(err)
                })
        },
        back() {
            this.$router.go(-1)
        }
    },
    components: {}
}
</script>

<style lang="scss" scoped>
.icon {
    font-size: 18px;
}
.header_box {
    justify-content: space-around;
}
</style>
